<template>
  <div class="cm-transaction-list bg-c-fff right-height mb70">
    <div class="bread rel">
      <a href="javascript:void(0);" class="font-s-16">首席监控师-法律服务订单管理</a>
      <form action="" class="abs seach">
        <input type="text" class="input-css" placeholder="客户信息/律师/监控员" v-model="keyword">
        <button class="xl-btn-css blue-button vb" @click="onSearch">搜索</button>
        <a href="#/index/cm-law-reallocate" class="blue-button vb">分配记录</a>
      </form>
    </div>
    <div class="content">
      <choose-type typename="订单状态" valuename="orderType" :itemlist="orderlist" :active="orderActive" @typechanged="onOptionChanged"></choose-type>
      <choose-type typename="交易阶段" valuename="tradeType" :itemlist="typelist" :active="typeActive" @typechanged="onOptionChanged"></choose-type>
      <table width="100%" class="auto">
        <tr>
          <th>订单时间</th>
          <th>订单编号</th>
          <th>客户信息</th>
          <th>律师姓名</th>
          <th>监控员姓名</th>
          <th>合同标价(元)</th>
          <th>交易阶段</th>
          <th>订单状态</th>
          <th>操作</th>
        </tr>
        <tr v-for="item in list">
          <td>{{item.createTime}}</td>
          <td>{{item.id}}</td>
          <td>{{item.customerName}}</td>
          <td>{{item.lawyerName}}</td>
          <td>{{item.monitorName | monitorNameFilter}}</td>
          <td>{{item.contractPrice/100}}</td>
          <td>{{item.status | status}}</td>
          <td>{{item.stage | stage}}</td>
          <td>
            <button class="blue-button small-btn-css" @click="onDetail(item)">查看详情</button>
            <button class="blue-button small-btn-css" @click="reset(item)">重新分配</button>
          </td>
        </tr>
      </table>
      <div class="fix foot-box">
        <div class="no-data-tip" v-show="list.length===0">暂无相关数据</div>
        <pagination :index="index" :total="total" v-show="list.length!==0" @pagechange="getData"></pagination>
      </div>
    </div>
    <vodal :show="resetShow" animation="zoom" :width="400" :height="280" @hide="resetShow=false">
      <div class="vodal-main">
        <h4>重新分配订单</h4>
        <div class="con">
          <p><span>所属角色：</span>
            <span class="role-name">法律服务监控员</span>
          </p>
          <p><span>重新分配给：</span>
            <select v-model="reSetStaff">
              <option value="">选择监控员</option>
              <option v-for="item in staffList" :value="item.id">{{item.userName}}</option>
            </select>
          </p>
          <p>
            <span>备注：</span>
            <input type="text" class="remark-text" placeholder="备注" v-model="remark">
          </p>
        </div>
        <div class="btn-box auto tc">
          <button type="button" class="blue-button xl-btn-css" @click="onResetComfirm">确认</button>
          <button type="button" class="blue-button xl-btn-css" @click="resetShow=false">取消</button>
        </div>
      </div>
    </vodal>
  </div>
</template>
<script type="text/javascript">
import Pagination from '../components/Pagination'
import ChooseType from '../components/ChooseType'
export default {
  components: {
    Pagination,
    ChooseType
  },
  data() {
    return {
      index: 1,
      total: 0,
      resetShow: false,
      orderActive: '',
      orderlist: [{
        value: '',
        text: '全部'
      }, {
        value: 0,
        text: '待分配'
      }, {
        value: 2,
        text: '进行中'
      }, {
        value: 4,
        text: '已终止'
      }, {
        value: 3,
        text: '已完成'
      }],
      typeActive: '',
      typelist: [{
        value: '',
        text: '全部'
      }, {
        value: 1,
        text: '确认付款'
      }, {
        value: 2,
        text: '监控员绘制流程图'
      }, {
        value: 3,
        text: '法律服务监控'
      }, {
        value: 4,
        text: '服务评价'
      }, {
        value: 5,
        text: '完成评价'
      }],
      keyword: '',
      list: [],
      remark: '',
      staffList: [],
      reSetStaff: '',
      currentOrderId: ''
    }
  },
  mounted() {
    this.getData(1)
    this.getStaffList()
  },
  methods: {
    onDetail(item) {
      if (item.stage === 2) {
        this.$router.push('/cm-law-notice?type=chief&id=' + item.id)
      }
      if (item.status === 1) {
        this.$router.push('/cm-law-notice?type=chief&id=' + item.id)
      }
      if (item.status === 2) {
        this.$router.push('/cm-law-drawing?type=chief&id=' + item.id)
      }
      if (item.status === 3) {
        this.$router.push('/cm-law-monitor?type=chief&id=' + item.id)
      }
      if (item.status === 4) {
        this.$router.push('/cm-law-complete?type=chief&id=' + item.id)
      }
      if (item.status === 5) {
        this.$router.push('/cm-law-complete?type=chief&id=' + item.id)
      }
    },
    onSearch() {
      this.getData(1)
    },
    onOptionChanged(type, value) {
      if (type === 'orderType') {
        this.orderActive = value
      }
      if (type === 'tradeType') {
        this.typeActive = value
      }
      this.getData(1)
    },
    reset(item) {
      if (item.stage === 2) {
        this.resetShow = true
        this.currentOrderId = item.id
        this.remark = ''
        this.reSetStaff = ''
      } else {
         this.$toasted.show('订单已完成，不能再分配！')
      }
    },
    onResetComfirm() {
      if (!this.reSetStaff) {
        this.$toasted.show('请选择法律监控员')
        return
      }
      this.resetShow = false
      this.$http.post('/legalService/chief/redistribute', {
        serviceId: this.currentOrderId,
        userId: this.reSetStaff,
        remark: this.remark
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.getData(this.index)
          this.$toasted.show('重新分配成功')
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络出错')
      })
    },
    getData(n) {
      this.$http.post('/legalService/chief/read/list', {
        page: n,
        rows: 10,
        stage: this.orderActive,
        status: this.typeActive,
        keyWord: this.keyword
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.index = n
          this.total = Math.ceil(data.data.rows.length / 10)
          this.list = data.data.rows
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络出错')
      })
    },
    getStaffList() {
      this.$http.get('/legalService/queryUsers').then(data => {
        if (data.data.httpCode === 200) {
          this.staffList = data.data.rows
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络出错')
      })
    }
  },
  filters: {
    status(v) {
      let text = ''
      let data = [{
        value: 1,
        text: '确认付款'
      }, {
        value: 2,
        text: '监控员绘制流程图'
      }, {
        value: 3,
        text: '法律服务监控'
      }, {
        value: 4,
        text: '服务评价'
      }, {
        value: 5,
        text: '完成评价'
      }]
      data.forEach(item => {
        if (v === item.value) {
          text = item.text
        }
      })
      return text
    },
    stage(v) {
      let text = ''
      let data = [{
        value: 0,
        text: '待分配'
      }, {
        value: 2,
        text: '进行中'
      }, {
        value: 1,
        text: '未支付'
      }, {
        value: 4,
        text: '已终止'
      }, {
        value: 3,
        text: '已完成'
      }]
      data.forEach(item => {
        if (v === item.value) {
          text = item.text
        }
      })
      return text
    },
    monitorNameFilter(v) {
      if (v) {
        return v
      } else {
        return '--'
      }
    }
  }
}

</script>
<style type="text/css" scoped>
.bread {
  padding-left: 20px;
  height: 50px;
  border-bottom: 1px solid #ddd;
}

.bread a {
  line-height: 50px;
}

.seach a {
  color: #fff;
  font-size: 14px;
  width: 100px;
  height: 35px;
  line-height: 35px;
}

.cm-transaction-list .seach {
  right: 10px;
  top: 8px;
}

.cm-transaction-list .seach input,
.cm-transaction-list .seach button {
  height: 35px;
  line-height: 35px;
}

.content {
  margin-top: 10px;
  padding: 0 30px;
}

.content table {
  margin-top: 20px;
}

.content table td button:nth-of-type(1) {
  margin-bottom: 7px;
}


.foot-box {
  padding: 35px 32px 15px 13px;
}

.vodal-main .con {
  padding: 4px 13px;
}

.vodal-main .con p {
  margin-bottom: 15px;
}

.vodal-main .con p span {
  width: 94px;
  display: inline-block;
}

select {
  width: 110px;
  height: 35px;
  border: 1px solid #ddd;
}

.vodal-main .con .role-name {
  width: 200px;
}

.remark-text {
  height: 25px;
  border: 1px solid #a5a5a5;
}

</style>
